<!-- eslint-disable -->
<template>
    <el-form label-width="100px"  >
      <el-form-item label="模块名"  prop="name"
      :rules="[
        { required: true, message: '模块名必填' },
      ]"
    >
        <el-input v-model="name" style="width: 500px;"></el-input>
      </el-form-item>

      <el-form-item label="描述" required  prop="des">
        <el-input type="textarea" v-model="des" style="width: 500px;"></el-input>
      </el-form-item>

      <el-form-item label="所属项目" required prop="group">
        <el-select v-model="group" placeholder="请选择" style="width: 200px;">
          <el-option v-for="item in projects" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
      <el-button type="primary" @click="addData">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
    </el-form>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import axios from 'axios';
  import { useRouter} from 'vue-router';
  const router =useRouter()
  
  
  var name=ref('')
  var des=ref('')
  var group = ref('')

    //新增数据提交表单对象
  var form= ref({
    name:name,
    des: des,
    group:group,
    create: "2010-02-30",
    update: "2010-02-30"
    
  })

  const moduleName = ref([
    { value: '用户', label: '用户' },
    { value: '订单', label: '订单' },
    { value: '商品', label: '商品' },
    { value: '后台运营', label: '后台运营' },
  ]);

  const projects = ref([
    { value: '电商', label: '电商' },
    { value: '贷款', label: '贷款' },
    { value: '直播', label: '直播' },
    { value: '游戏', label: '游戏' },
  ]);
  

 //提交表单
 function addData(){
    axios.post('http://localhost:3000/xiangmu',form.value)
  .then(res => {
    router.push('/about');
  })
  .catch(err => {
    console.error(err); 
  })
}

  </script>